<template>
	<view class="home-page">
		<view class="title-w-box" :style="{paddingTop: topSafe + 'px', opacity: opacity}">
		</view>
		<view id="past0" class="title-box" :style="{paddingTop: topSafe + 'px'}">
			<view class="main">直租侠</view>
			<view class="line"></view>
			<view class="sub">万物皆可租</view>
		</view>
		<view class="head-content">
			<!-- <view class="slogan-box" :style="'padding-top:' + topSafe">
				<view class="main">直租侠</view>
				<view class="line"></view>
				<view class="sub">万物皆可租</view>
			</view> -->
			<navigator url="/pages/goods/goods_search/index" class="search-box">
				<image src="../../static/images/icon/search.png" class="s-icon"></image>
				<input class="set app-border-color" type="text" value="" placeholder="输入关键词搜索" />
			</navigator>
			<view class="nav-box">
				<view 
					class="item" 
					v-for="(item, index) in fastList" 
					:key="index"
					@click="clickNav(item)"
				>
					<view class="pic">
						<image class="pic" :src="item.pic"></image>
					</view>
					<text>{{item.cate_name}}</text>
				</view>
			</view>
		</view>
		
	
		
		<view class="main-content">
			
			<view class="user-ad" @click="toActivity()">
				<image style="border-radius: 16rpx;" src="https://jipinzulin.oss-cn-beijing.aliyuncs.com/attach/2023/06/2667f202306161932018489.png"></image>
			</view>
			
			<!-- <navigator url="/pages/module/brand" class="middle-ad"></navigator> -->
			
		<!-- 	<view class="subsidy">
				<view class="head">
					<image src="https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/413924c0a396a0aff57f84421d358769.png"></image>
					<view class="line"></view>
					<view class="tips">每日前100名特惠</view>
				</view>
				<scroll-view scroll-x="true" class="good-list">
					<navigator url="/pages/module/brand" class="item" v-for="item in baiyiList">
						<view class="pic">
							<image class="pic" :src="item.image"></image>
						</view>
						<view class="title m-ellipsis">{{item.store_name}}</view>
						<view class="price">¥<text>{{item.min_day_price}}</text> <text class="note">/天</text></view>
					</navigator>
				</scroll-view>
			</view>
		 -->
			<view class="category">
				<view class="box box1" @click="goRouter('brand')">
					<image class="slogan" src="https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/9c4f2551c25bd35c7a8582071d8e3b69.png"></image>
					<view class="list">
						<view class="item" v-for="item in brandList">
							<image class="item-img" :src="item.image"></image>
						</view>
					</view>
				</view>
				
				<view class="box box2" @click="goRouter('newProduct')">
					<image class="slogan" src="https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/3b62c2ed9231e2fb311fc251db0edc98.png"></image>
					<view class="list">
						<view class="item" v-for="item in newList">
							<image class="item-img" :src="item.image"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		
		<view id="past1">
			<view class="top-tabs" :class="tabShow? 'top-header' : ''">
				<view  class="item" :class="currentIndex == 0 ? 'active': ''" @click="changeTab(0)">
					<view class="main">{{infoData.listLabelList.brand.title}}</view>
					<view class="sub">{{infoData.listLabelList.brand.desc}}</view>
				</view>
				
				<view class="item" :class="currentIndex == 1 ? 'active': ''" @click="changeTab(1)">
					<view class="main">{{infoData.listLabelList.computer.title}}</view>
					<view class="sub">{{infoData.listLabelList.computer.desc}}</view>
				</view>
				
				<view class="item" :class="currentIndex == 2 ? 'active': ''" @click="changeTab(2)">
				<view class="main">{{infoData.listLabelList.hot.title}}</view>
				<view class="sub">{{infoData.listLabelList.hot.desc}}</view>
				</view>
				
				<view class="item" :class="currentIndex == 3 ? 'active': ''" @click="changeTab(3)">
					<view class="main">{{infoData.listLabelList.rec.title}}</view>
					<view class="sub">{{infoData.listLabelList.rec.desc}}</view>
				</view>
			</view>
			<view style="height: 150rpx;" v-if="tabShow">
				
			</view>
		</view>
		
		
		<view class="recommend">
			<view class="recommend-list">
				<view class="item" v-for="(item,index) in recommendList" @click="toDetail(item.id)">
					<view class="pic">
						<image class="pic" :src="item.image"></image>
					</view>
					<view class="main-box">
						<view class="title m-ellipsis">
							<view class="news">全新</view>
							{{item.store_name}}
						</view>
						<!-- <view class="sub">官方首发新品，量不多</view>
						<view class="type">
							<view class="jp">极品精选</view>
							<view class="bt">官方补贴</view>
						</view> -->
						<view class="price">¥<text>{{item.stageMinDayPrice}}</text> <text class="note">/天</text></view>
						<view class="tabs">
							<view class="tab">顺丰包邮</view>
							<!-- <view class="tab">租完归还</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		getIndexData
	} from '@/api/api.js';
	export default {
		data() {
			return {
				appType: app.globalData.appType,
				opacity: 0,
				topSafe: 0,
				brandList: [],
				newList: [],
				fastList: [],
				baiyiList: [],
				listLabelList: [],
				infoData: [],
				currentIndex: 0,
				recommendList: [],
				tabTop: 20,
				tabShow: false,
				titleHeight: 0,
			}
		},
		onLoad(options) {
			this.getIndexData();
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					// let statusBar = 0 //状态栏高度
					// let customBar = 0; // 状态栏高度 + 导航栏高度  
					// #ifdef MP-ALIPAY
					// statusBar = e.statusBarHeight
					// customBar = e.statusBarHeight + e.titleBarHeight
					this.topSafe = e.statusBarHeight //状态栏高度
					// #endif
					console.log(this.topSafe, "---this.topSafe");
				}
			})
		
		},
		methods: {
			toActivity() {
				if (this.recommendList.length > 0) {
					const id = this.recommendList[0].id
					uni.navigateTo({
						url: '/pages/goods_details/index?id=' + id
					})
				}
			},
			onPageScroll(res) {
				var that = this,
					scrollY = res.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
			
				if (scrollY < this.tabTop - this.titleHeight) {
					if (this.tabShow) {
						this.tabShow = false
					}
				} else  {
					if (!this.tabShow) {
						this.tabShow = true
					}
				}
		
			},
			/* 点击导航跳转 */
			clickNav(eve) {
				uni.navigateTo({
					url: `/pages/goods/goods_list/index?sid=${eve.id}&title=${eve.cate_name}&searchValue=${eve.cate_name}`
				})
			},
			/* 跳转商品详情 */
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				})
			},
			/* 跳转 */
			goRouter(type) {
				let url = ""
				if(type == "brand") {
					/* 跳转品牌馆 */
					url = "/pages/module/brand"
				}else if(type == "newProduct") {
					/* 跳转新品区 */
					url = "/pages/module/new"
				}
				uni.navigateTo({
					url
				})
			},
			getIndexData() {
				const that = this
				uni.showLoading({
					title: '加载中...'
				})
				getIndexData().then((res) => {
					that.infoData = res.data.info
					that.brandList = res.data.info.brandList
					that.newList = res.data.info.newList
					that.fastList = res.data.info.fastList
					that.baiyiList = res.data.info.baiyiList
					that.listLabelList = res.data.info.listLabelList
					that.recommendList = res.data.info.listLabelList.brand.data
					const query = uni.createSelectorQuery();
					
					setTimeout(() => {
						that.$nextTick(() => {
							query.select('#past1')
							.boundingClientRect(data => {
								that.tabTop = data.top;
							})
							.exec();
						})
					}, 500);
					
					const query1 = uni.createSelectorQuery();
					setTimeout(() => {
						that.$nextTick(() => {
							query1.select('#past0')
							.boundingClientRect(data => {
								that.titleHeight = data.height;
							})
							.exec();
						})
					}, 500);
					
					
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				})
			},
			changeTab(index) {
				console.log('index')
				console.log(index)
				this.currentIndex = index
				switch (this.currentIndex) {
					case 0:
						this.recommendList = this.infoData.listLabelList.brand.data
						break;
					case 1:
						this.recommendList = this.infoData.listLabelList.computer.data
						break;
					case 2:
						this.recommendList = this.infoData.listLabelList.hot.data
						break;
					case 3:
						this.recommendList = this.infoData.listLabelList.rec.data
						break;	
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		background-color: #F5F7FA;
	}
	
	.title-w-box {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 277;
		display: flex;
		align-items: center;
		padding-left: 80rpx;
		background-color: #fff;
		height: 170rpx;
	}
	
	.title-box {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 277;
		display: flex;
		align-items: center;
		padding-left: 80rpx;
		height: 170rpx;
		.main {
			font-size: 32rpx;
			font-weight: bold;
			color: #1F1F1F;
		}
		
		.line {
			margin: 0 16rpx;
			width: 2rpx;
			height: 24rpx;
			background: rgba(0,190,204,0.24);
		}
		
		.sub {
			font-size: 28rpx;
			font-weight: 500;
			color: #1F1F1F;
		}
	}
	.head-content {
		padding: 0 24rpx;
		padding-top: 160rpx;
		// background: url('https://oss.jingyinmao.cn/attach/2023/07/7e478202307041757023454.png');
		background: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/fe98206dc6195c8a77970ae9ef05e36d.png');
		background-repeat: no-repeat;
		background-size: contain;
		
		
		.slogan-box {
			display: flex;
			align-items: center;
			height: 96rpx;
			margin-left: 40rpx;
			
			.main {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
			
			.line {
				margin: 0 16rpx;
				width: 2rpx;
				height: 24rpx;
				background: rgba(0,190,204,0.24);
			}
			
			.sub {
				font-size: 28rpx;
				font-weight: 500;
				color: #1F1F1F;
			}
		}
	
		.search-box {
			margin-top: 24rpx;
			position: relative;
			width: 100%;
			
			.set {
				padding-left: 64rpx;
				width: 100%;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 1rpx solid #39CCC2;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				border-radius: 40rpx;
				overflow: hidden;
			}
			
			.s-icon {
				position: absolute;
				top: 24rpx;
				left: 24rpx;
				width: 32rpx;
				height: 32rpx;
				z-index: 2;
			}
		}
	
		.nav-box {
			padding-top: 16rpx;
			display: flex;
			flex-wrap: wrap;
			
			.item {
				margin-top: 32rpx;
				width: 20%;
				text-align: center;
				
				.pic {
					margin: 0 auto;
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					background: rgba(0,209,224,0.12) 0%;
				}
				
				text {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #1F1F1F;
					line-height: 24rpx;
				}
			}
		}
	}
	.main-content {
		margin-top: 32rpx;
		padding: 0 24rpx;
		
		.middle-ad {
			width: 702rpx;
			height: 176rpx;
			background: #D8D8D8;
			border-radius: 16rpx;
		}
		
		.subsidy {
			margin-top: 22rpx;
			padding: 34rpx 24rpx;
			background: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/7347bc782d268679ba90bdbb2062bb5a.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-color: #fff;
			border-radius: 16rpx;
			
			.head {
				display: flex;
				align-items: center;
				
				image {
					width: 176rpx;
					height: 32rpx;
				}
				
				.line {
					margin: 0 16rpx;
					width: 2rpx;
					height: 24rpx;
					background: rgba(255,71,96,0.24);
				}
				
				.tips {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4760;
				}
			}
		
			.good-list {
				margin-top: 40rpx;
				white-space: nowrap;
				width: 100%;
				
				.item {
					display: inline-block;
					width: 160rpx;
					
					~.item {
						margin-left: 32rpx;
					}
					
					.pic {
						width: 144rpx;
						height: 144rpx;
						border-radius: 16rpx;
						overflow: hidden;
						background-color: #ccc;
						
						image {
							margin: 0 auto;
							display: block;
							width: 144rpx;
							height: 144rpx;
						}
					}
					
					.title {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 40rpx;
						white-space: normal;
					}
					
					.price {
						margin-top: 8rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #FF1F2E;
						vertical-align: text-bottom;
						text-align: center;
						
						text {
							margin-left: 4rpx;
							font-size: 28rpx;
						}
						
						.note {
							margin-left: 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FF1F2E;
						}
					}
				}
			}
		}
		
		.category {
			display: flex;
			margin-top: 24rpx;
			justify-content: space-between;
			
			.box {
				padding: 24rpx;
				width: 340rpx;
				height: 238rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				background-repeat: no-repeat;
				background-size: contain;
				
				&.box1 {
					background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/6cbd4806f8f68b44e01b1f8891efbe90.png');
				}
				
				&.box2 {
					background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230511/71a169870e97bf6e0a29d132a469d493.png');
				}
				
				.slogan {
					width: 128rpx;
					height: 32rpx;
				}
				
				.list {
					margin-top: 24rpx;
					display: flex;
					justify-content: space-between;
					
					.item {
						width: 134rpx;
						height: 134rpx;
						background: #D8D8D8;
						border-radius: 8rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		
	}
	
	.top-tabs {
		padding: 0 24rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F5F7FA;
		
		.item {
			width: 156rpx;
			text-align: center;
			
			&.active {
				
				.main {
					color: #1F1F1F;
				}
				
				.sub {
					background: linear-gradient(180deg, rgba(0,209,224,0.24) 0%, rgba(0,209,224,0) 100%);
					border-radius: 20rpx;
					color: #00ABB8;
				}
			}
			
			.main {
				font-size: 32rpx;
				font-weight: bold;
				color: #B8B8B8;
				line-height: 32rpx;
			}
			
			.sub {
				margin: 16rpx auto 0 auto;
				width: 128rpx;
				color: #B8B8B8;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
		
	.recommend {
		padding: 0 24rpx 24rpx 24rpx;
	
		.recommend-list {
			// padding-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.item {
				width: 340rpx;
				margin-top: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				
				.pic {
					width: 340rpx;
					height: 340rpx;
					background-color: #ccc;
				}
				
				.main-box {
					margin-top: 18rpx;
					padding: 0 16rpx 28rpx 16rpx;
					
					.title {
						font-size: 28rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 44rpx;
						vertical-align: middle;
						
						.news {
							display: inline-block;
							margin-right: 8rpx;
							padding: 0 8rpx;
							height: 36rpx;
							line-height: 40rpx;
							line-height: 36rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
							background: linear-gradient(180deg, #FF9D5C 0%, #FF7847 100%);
							border-radius: 20rpx;
							text-align: center;
						}
					}
				
					.sub {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
					}
					
					.type {
						margin-top: 16rpx;
						display: flex;
						
						view {
							margin-left: 16rpx;
							width: 112rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							text-align: center;
							
							&:first-child { margin-left: 0; }
							
							&.jp {
								background: rgba(255,145,71,0.08);
								color: #FF9147;
							}
							
							&.bt {
								background: rgba(255,96,71,0.08);
								color: #FF3D1F;
							}
						}
					}
				
					.price {
						margin-top: 24rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #FF1F2E;
						vertical-align: text-bottom;
						
						text {
							margin-left: 4rpx;
							font-size: 40rpx;
						}
						
						.note {
							margin-left: 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FF1F2E;
						}
					}
				
					.tabs {
						margin-top: 16rpx;
						display: flex;
						
						.tab {
							margin-left: 8rpx;
							width: 104rpx;
							height: 32rpx;
							line-height: 32rpx;
							background: rgba(110,184,179,0.12);
							border-radius: 4rpx;
							font-size: 24rpx;
							color: #6EB8B3;
							text-align: center;
							
							&:first-child { margin-left: 0; }
						}
					}
				}
			}
		}
	}
	
	.top-header {
		position: fixed;
		top: 170rpx;
		width: 100%;
		z-index: 8;
		border-radius: 0;
		background-color: #fff;
	}
	
	.user-ad {
		margin-top: 24rpx;
		width: 100%;
		height: 160rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
		
</style>
